<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mysql SaaS</title>
  <link rel="stylesheet" href="static/jquery-ui-1.11.4/jquery-ui.css">
  <script src="static/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
  <script src="static/jquery-ui-1.11.4/jquery-ui.js"></script>
  <script>
	$(window).load=function(){
		alert('{{loginInfo}}');
	};

  $( function() {
    $( "#create_docker" ).click( function( event ) {
      $.ajax({
		url:'/containers/create',
		success: function(data, status){
			if(status!="success"){
				alert(status+":"+data);
			}
			window.location='/';
		}
		})
    } );

    $( "#run_docker" ).click( function( event ) {
      $.ajax({
		url:'/containers/start',
		success: function(data, status){
			if(status!="success"){
				alert(status+":"+data);
			}
			window.location='/';
		}
		})
    } );

    $( "#unpause_docker" ).click( function( event ) {
      $.ajax({
		url:'/containers/unpause',
		success: function(data, status){
			if(status!="success"){
				alert(status+":"+data);
			}
			window.location='/';
		}
		})
    } );

    $( "#stop_docker" ).click( function( event ) {
      $.ajax({
		url:'/containers/stop',
		success: function(data, status){
			if(status!="success"){
				alert(status+":"+data);
			}
			window.location='/';
		}
		})
    } );

  } );
  </script>
</head>
<body>
%if len(loginInfo) == 0:

	<div id="loginDiv" class="widget">
		<h1>Login</h1>
		<form id="login" name="login" action="/login" method="post">
			<ul>
				<li>user:<input id="user" name="user"/></li>
				<li>password:<input type="password" id="password" name="password"/></li>
			</ul>
			<input id="submitBtn" name="submitBtn" type="submit" value="login"/>
		</form>
	</div>
	<div id="registerDiv" class="widget">
		<h1>Register</h1>
		<form id="register" name="register" action="/register" method="post">
			<ul>
				<li>user:<input id="user" name="user"/></li>
				<li>password:<input type="password" id="password" name="password"/></li>
				<li>repeat password:<input type="password" id="password2" name="password2"/></li>
			</ul>
			<input id="submitBtn" name="submitBtn" type="submit" value="logon"/>
		</form>
	</div>
%else:
	<h3>Hello {{loginInfo.get('name')}}</h3>
	<h1>Welcome to Mysql Docker SaaS</h1>
	%if container == "":
		<div id="create" class="widget">
		  <h2>You don't have any Mysql Docker</h2>
		  <button id="create_docker">Create one</button>
		</div>
	%else:
		<div id="monitor" class="widget">
			<h2>Docker status: {{container.get("Status")}}</h2>
			%if container.get("Status").startswith("Exited"):
		  		<button id="run_docker">Run it</button>
			%end
			%if container.get("Status").startswith("Up"):
				%if container.get("Status").endswith("(Paused)"):
					<button id="unpause_docker">Resume it</button>
				%else:
					<h2>You can connect it use:</h2>
					<ul>
						<li>Host: {{container.get('Ports')[0].get('IP')}}</li>
						<li>Port: {{container.get('Ports')[0].get('PublicPort')}}</li>
						<li>username: root</li>
						<li>password: admin</li>
					</ul>
		  			<button id="stop_docker">Stop it</button>
				%end
			%end
		
		</div>
	%end
%end
</body>
</html>

